<template>
  <view class="shopDetail">
    <scroll-view scroll-y class="scrollView">
      <!-- 轮播图 -->
      <view class="swiperDiv">
        <uni-swiper-dot
          class="uni-swiper-dot-box"
          :current="bannerCurrent"
          :dots-styles="dotsStyles"
          mode="round"
          field="content"
          :info="bannerList"
        >
          <swiper class="swiper" circular :autoplay="true" @change="bannerChange">
            <template>
              <swiper-item v-for="item in bannerList" :key="item.id">
                <image class="swiper-item" :src="item.imgUrl" />
              </swiper-item>
            </template>
          </swiper>
        </uni-swiper-dot>
      </view>
      <!-- 商品信息 -->
      <view class="shopContent">
        <view class="shopTitle">
          {{ shopTitle }}
        </view>
        <view class="shopTag">
          明星产品
        </view>
        <view class="shopIntro">
          精选优质天然燕窝，采用先进处理技术精制而成，确保每一盏都富含营养，纯净安全。独特的高贵包装设计，既方便储存又适合作为馈赠佳品。享受自然的滋养，传递对健康的承诺与美好生活的追求。每天一杯，让您由内而外焕发活力。
        </view>
      </view>
      <!-- 商品参数 -->
      <view class="shopParam">
        <view class="paramTitle">
          商品参数
        </view>
        <view class="paramsContent">
          <view class="paramsItem">
            <view class="paramsItemTitle">
              产地
            </view>
            <view class="paramsItemContent">
              中国大陆
            </view>
          </view>
          <view class="paramsItem">
            <view class="paramsItemTitle">
              净含量
            </view>
            <view class="paramsItemContent">
              45g*6
            </view>
          </view>
          <view class="paramsItem">
            <view class="paramsItemTitle">
              保质期
            </view>
            <view class="paramsItemContent">
              90天
            </view>
          </view>
          <view class="paramsItem">
            <view class="paramsItemTitle">
              包装方式
            </view>
            <view class="paramsItemContent">
              盒装
            </view>
          </view>
        </view>
      </view>
      <!-- 商品详情 -->
      <view class="shopImg">
        <view class="paramTitle">
          商品详情
        </view>
        <view v-for="item in bannerList" :key="item.id" class="imgDetail">
          <image
            class="imageItem"
            :src="item.imgUrl"
            mode="widthFix"
          />
        </view>
      </view>
    </scroll-view>

    <view class="shopBottom">
      <view class="shopNum">
        <view class="shopPrice">
            ￥{{ count * 888 }}
        </view>
        <view class="shopCount">
          <uni-number-box  v-model="count" :min="1"></uni-number-box>
        </view>
      </view>
      <view class="shopNumTag">
        <view class="tagItem" :class="tagId == i.count&&'active'" @click="tagCheck(i)" v-for="i in tagList" :key="i.count">
          {{ i.name }}
        </view>
      </view>
      <view class="btnbottom">
        <view class="buttonView leftButton" @click="handleOrder(1)">
          <text>购买货品</text>
        </view>
        <view class="buttonView rightButton" @click="handleOrder(2)">
          <text>购买卡券</text>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  name: 'House',
  components: {},
  props: {},
  data() {
    return {
      bannerList: [
        {
          imgUrl: this.staticDir + '/left.jpg',
          id: 0
        },
        {
          imgUrl:this.staticDir + '/right.jpg',
          id: 1
        }
      ],
      bannerCurrent: 0,
      dotsStyles: {
        width: 10,
        backgroundColor: 'rgba(255, 255, 255, 0.3)',
        border: '0px rgba(255, 255, 255, 0.3) solid',
        color: '#fff',
        bottom: 42,
        selectedBackgroundColor: 'rgba(255, 255, 255, 1)',
        selectedBorder: '0px rgba(255, 255, 255, 1) solid'
      },
      shopTitle: '',
      count:1,
      tagList:[
        {name:'一周用量',count: 3},
        {name:'一月用量',count:12},
        {name:'一季用量',count:36}
      ],
      tagId: 3
    };
  },
  computed: {},
  methods: {
    bannerChange(e) {
      this.bannerCurrent = e.detail.current;
    },
    tagCheck(i) {
      this.tagId = i.count
      this.count=i.count
    },
    // 下单
    handleOrder() {
      uni.navigateTo({
        url: '/pages/shop/order/order'
      });
    }
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad(option) {
    console.log(option);
    if (option.type == 'big') {
      this.shopTitle = '大金柜';
    } else {
      this.shopTitle = '小金柜';
    }
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {}
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
};
</script>

<style lang="scss" scoped>
  .shopDetail {
    /* #ifdef MP-BAIDU */
    width: 100vw;
    /* #endif */
    .scrollView {
      height: calc(100vh - 340rpx - env(safe-area-inset-bottom) - env(safe-area-inset-top));
      background-color: #F7F8F9;
    }
    // background: #f5f5f5;
    // padding-bottom:calc(116rpx + env(safe-area-inset-bottom));
    position: relative;
    @import './index.scss';
  }
</style>
